<template>
	<view class="m-box">
		<u-toast ref="uToast"></u-toast>
		<u-select v-model="show" mode="mutil-column-auto" :list="areaList" @confirm="confirm"
			@cancel="show = false"></u-select>
		<u-select v-model="showType" :list="typeList" @confirm="confirmType" @cancel="showType = false"></u-select>
		<u-form :model="form" ref="uForm">
			<u-form-item label="展示标题" prop="title" labelWidth="120" :required="true">
				<u-input v-model="form.title" placeholder="请输入(10~20字最佳,限制 28字)" inputAlign="right" />
			</u-form-item>
			<u-form-item label="所在地" prop="area" labelWidth="120" required="true">
				<u-input v-model="form.area" type="select" placeholder="请选择" disabled="true" inputAlign="right"
					@click="chooseArea" />
			</u-form-item>
			<u-form-item label="服务类目" prop="type" labelWidth="120" required="true">
				<u-input v-model="form.type" type="select" placeholder="请选择" disabled="true" inputAlign="right"
					@click="chooseType" />
			</u-form-item>
			<u-form-item label="基本服务" prop="content1" labelWidth="120" required="true" label-position="top">
				<u-input v-model="form.content1" type="textarea" placeholder="请输入内容" :fixed="true" inputAlign="left" />
			</u-form-item>
			<u-form-item label="擅长服务" prop="content2" labelWidth="120" label-position="top">
				<u-input v-model="form.content2" type="textarea" placeholder="请输入内容" :fixed="true" inputAlign="left" />
			</u-form-item>
			<u-form-item label="售后保证" prop="content3" labelWidth="120" label-position="top">
				<u-input v-model="form.content3" type="textarea" placeholder="请输入内容" :fixed="true" inputAlign="left" />
			</u-form-item>
			<u-form-item label-position="top" label="上传图片" prop="photo" label-width="150" required="true">
				<view style="position: absolute;right: 10px;top: 10px;color: #ababab;">(上传您的证件照、办公环境或办结案例为佳) </view>
				<view style="display: flex;">
					<view>
						<u-upload width="160" height="160" ref="uUpload" :file-list="imgFileList" name="1"
							multiple="true" max-count="5" show-progress="true" :auto-upload="false"
							:limitType="limitType" @on-list-change="onListChange"></u-upload>
					</view>
					<view style="margin-left: 10px;height: 20px;margin-top: 60px;color: #848484;">
						<text>{{imgNum}}/5</text>
					</view>
				</view>
			</u-form-item>
		</u-form>
		<view style="margin-top: 50px;width: 90%;margin-left: 5%;">
			<u-button @click="addOrder" :custom-style="customStyle" shape="circle" type="success">提交</u-button>
			<view
				style="padding-bottom: 10px;margin-top: 12px;color: #aaa;text-align: center;font-size: 14px;display: flex;justify-content: center;">
				<view><u-checkbox-group>
						<u-checkbox active-color="#009688" @change="checkboxChange" v-model="item.checked"
							v-for="(item, index) in list" :key="index" :name="item.name"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view style="margin-left: -10px;">已阅读并同意</view>
				<view @click="toStatement">《免责声明》</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		localTypeApis,
		orderApis,
		getHost,
		fileApis
	} from '@/apis/index'
	export default {
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				agree: false,
				customStyle: {
					backgroundColor: '#009688'
				},
				show: false,
				showType: false,
				limitType: ['png', 'jpg'],
				imgNum: 0,
				typeList: [],
				list: [{
					name: ''
				}, ],
				form: {
					title: '',
					area: '',
					type: '',
					content1: '',
					content2: '',
					content3: '',
					photo: ''
				},
				rules: {
					title: [{
						required: true,
						min: 10,
						max: 28,
						message: '请输入(10~20字最佳,限制 28字)',
						trigger: 'blur,change'
					}],
					area: [{
						required: true,
						message: '请选择所在地',
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '请选择服务类目',
						trigger: 'change'
					}],
					content1: [{
						required: true,
						message: '请输入',
						trigger: 'change'
					}],
					photo: [{
						required: true,
						message: '请上传图片',
						trigger: 'change'
					}]
				},
				imgFileList: [],
				areaList: [],
				agreeAlert: {
					type: 'warning',
					title: "请阅读免责声明!",
					duration: 4000,
				},
			};
		},
		mounted() {
			this.getTypeList()
			this.getAreaInfo()
		},
		methods: {
			getAreaInfo() {
				orderApis.getAreaInfo().then((res) => {
					this.areaList = res.data.data
				})
			},
			confirm(e) {
				let province = e[0].label
				let city = e[1].label
				this.form.area = province + city
			},
			confirmType(e) {
				let label = e[0].label
				this.form.type = label
			},

			getTypeList() {
				var _this = this
				localTypeApis.getList().then((res) => {

					let list = res.data.data
					let reList = []
					for (let item of list) {
						let data = {
							value: item.id,
							label: item.name
						}

						reList.push(data)
					}

					_this.typeList = reList
				})
			},

			showToast(params) {
				this.$refs.uToast.show(params)
			},

			async addOrder() {
				let _this = this

				if (!_this.agree) {
					_this.showToast(_this.agreeAlert)
					return
				}

				var va = false
				_this.$refs.uForm.validate(valid => {
					va = valid
				})

				if (va) {
					//跳到支付页面，进行支付 todo
					let fileList = []
					for (var i = 0; i < _this.imgFileList.length; i++) {
						let path = _this.imgFileList[i].file.path

						await this.getFileId(path).then((res) => {
							fileList.push(res.fileId)
						})
					}

					let reqInfo = {
						fileIds: fileList,
						..._this.form
					}

					//保存请求参数
					uni.setStorageSync('orderInfo', reqInfo);

					//跳转支付页面
					_this.toModel()
				}
			},

			toModel() {
				uni.navigateTo({
					url: '../model/model'
				})
			},

			getFileId(path) {
				return new Promise(function(resolve, reject) {
					const userToken = uni.getStorageSync('userToken')
					const requestUrl = getHost() + '/wx/uploadFile/uploadImg'
					let config = fileApis.uploadFile(requestUrl, userToken, path, false, null)
					config.then((res) => {
						resolve(res.data)
					})
				});
			},

			checkboxChange(e) {
				if (e.value) {
					this.agree = true
				}
			},
			onListChange(lists) {
				this.imgFileList = lists;
				this.imgNum = lists.length;

				console.log("this.imgNum:" + this.imgNum)
				if (this.imgNum > 0) {
					this.form.photo = '1'

				} else {
					this.form.photo = ''
				}
			},
			chooseArea() {
				this.show = true
			},
			chooseType() {
				this.showType = true
			},
			change(obj) {
				console.log(obj)
				//只能监听第一列
			},
			submit() {
				console.log(this.form)
			},
			toStatement() {
				uni.navigateTo({
					url: '../statement/statement'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.m-box {
		padding: 20px;
		background-color: white;
		height: 100vh;
		overflow-y: scroll;
	}
</style>